<template>
	<view>
		<view class="title">最多上传100个文件</view>
		<button type="primary" size="mini" @click="chooseFile()">选择文件</button>
		<view class="file-block">
			<view class="file-item" v-for="(item,index) in fileList" :key=index >
				<text>{{item.fileName}}
				<text @click="handleRemove(index)" v-if="item.originalFileName != ''"class="iconfont iconziyuan1">
				</text></text> 
				<cmd-progress :percent="item.progress"></cmd-progress>
			</view>
		</view>
		
	</view>
</template>

<script>
	var _self
	export default {
		props: {
		  limit: {
		    type: Number,
		    default: 5
		  },
		  url: {
		    type: String,
		    required: true
		  },
		  name: {
		    type: String,
		    default: 'file'
		  },
		  fileDescription: {
			  type: String,
			  default: ''
		  },
		  formData: {
		    type: Object,
		    default () {
		      return {}
		    }
		  },
		  header: {
		    type: Object,
		    default () {
		      return {}
		    }
		  },
		  fileList: {
		    type: Array,
		    default () {
		      return []
		    }
		  }
		},
		data() {
		  return {}
		},
		created() {
			_self = this
		},
		methods: {
			chooseFile(){
				if(this.fileDescription == ''){
					uni.showToast({
						icon:"none",
						title:"请先填写上传文件说明"
					})
					return
				}
				uni.chooseFile({
				    success: function (res) {
				        // console.log(JSON.stringify(res.tempFilePaths));
						res.tempFilePaths.forEach(ct => {
							_self.fileList.push({
								src: ct,
								progress : 0,
								group: "",
								fileName: "",
								originalFileName: "",
								md5: ""
							})
						})
						_self.fileList.forEach(fl => {
							if(fl.progress == 0){
								fl.progress = 1
								console.log("fl",fl)
								const uploadTask = uni.uploadFile({
								  url: _self.url+"?fileDescription="+_self.fileDescription,
								  filePath: fl.src,
								  success: (res) => {
									  var response = JSON.parse(res.data)
									  console.log(response)
									  if(response.code == 20000){
										  fl.id = response.data.id
										  fl.progress = 100
										  fl.src = response.data.fileUrl
										  fl.group = response.data.fileGroup 
										  fl.fileName = response.data.fileName
										  fl.md5 = response.data.md5
										  fl.originalFileName = response.data.originalFileName
									  }else{
										  uni.showToast({
										  	icon:"none",
										  	title:"上传失败"
										  })
									  }
									  
								  },
								  fail: (err) => {
								    uni.showToast({
								    	icon:"none",
										title:"上传失败"
								    })
								  }
								})
								uploadTask.onProgressUpdate((res) => {
									fl.progress = res.progress
								})
							}
						})
				    }
				});
			},
			handleRemove(index) {
			  var fl = this.fileList[index]
			  uni.request({
				url: _self.utils.basicUrl+"/file/delete?md5="+fl.md5+"&id="+fl.id,
				method: "DELETE",
				data: {},
				success: function(res) {
					if(res.data.code === 20000){
						uni.showToast({
							icon:"none",
							title:"删除成功"
						})
						_self.fileList.splice(index,1)
					}else{
						_self.utils.requestFail(res)
					}
				},
				fail: () => {
					uni.showToast({
						icon:"none",
						title: '网络错误'
					})
				},
				complete() {
					
				}
			  })
			}
		}
	}
</script>

<style>
	.title {
		margin: 20rpx 0;
	}
	.iconziyuan1{
		width: 25rpx;
		height: 25rpx;
		margin-left: 30rpx;
		border-radius: 50%;
	}
</style>
